import React, { Component, useState, useEffect, useReducer } from 'react'
import { View, Text, TextInput, Button, Platform, StyleSheet, Image, TouchableOpacity, Alert, ScrollView } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法
import MinimalismCalendar from 'react-native-ocalendar';

class Calendar extends Component {
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    constructor(props) {
        super(props)
        this.state = {
            data: "婚礼日期"
        }
        this.DateTransfer = this.DateTransfer.bind(this)
        
    }
    
    //数据设置
    DateTransfer(cont) {
        // Alert.alert(cont)
        this.setState({
            data: cont[0] + '-' + cont[1] + '-' + cont[2]
        })
    }
    getday(data1){
        //2022-2-10   -    2021-9-12    
        //2022-9-10   -    2021-1-1
        let data=[Number(data1[0]),Number(data1[1]),Number(data1[2])]
        let list1=this.state.data.split("-")
        let list=[Number(list1[0]),Number(list1[1]),Number(list1[2])]
        console.log(data,list)
        let year,month,day=0
        if(list[2]>data[2]){
            day=list[2]-data[2]+5
            if(list[1]>data[1]){
                month=list[1]-data[1]
                year=list[0]-data[0]
            }else{
                month=12-data[1]+list[1]
                year=list[0]-data[0]-1
            }
        }else{
            data=30-data[2]+list[2]+5
            if(list[1]>data[1]){
                month=list[1]-data[1]-1
                year=year=list[0]-data[0]
            }else{
                month=12-data[1]+list[1]-1
                year=list[0]-data[0]-1
            }
        }
        return year*365+month*30+day
        
    }
    render() {
        return (
            <ScrollView style={{ backgroundColor: '#F5F5F5' }}>
                <View style={styles.top}>
                    <Text style={styles.back} 
                    onPress={() => {this.props.navigation.push('Mine',{day:this.getday(this.props.route.params.data)})}}
                    >Back</Text>
                    <Text style={styles.title}>婚礼倒计时</Text>
                </View>
                <View style={styles.container}>
                    <TouchableOpacity
                        style={{
                            paddingVertical: 15,
                            paddingHorizontal: 30, borderRadius: 3, alignItems: 'center', justifyContent: 'center'
                        }}
                        onPress={() => { }}>
                        <Text style={{ fontSize: 15, color: 'black' }}>{this.state.data}</Text>
                    </TouchableOpacity>
                    <MinimalismCalendar DateTransfer={this.DateTransfer} />
                </View>

            </ScrollView>
        )


    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F5FCFF',
        marginTop: 100
      },
    title: {
        fontSize: 20,
        position: 'absolute',
        top: ptd(7),
        left: ptd(160)
    },
    back: {
        paddingLeft: ptd(10),
        marginTop: ptd(10),
    },
    top: {
        position: 'absolute',
        width: '100%',
        height: 50,
        backgroundColor: '#F8F8F8',
        borderColor: '#F8F8F8',
        borderWidth: 2
    }
});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Calendar);
